<div xmlns:th="https://www.thymeleaf.org"
     th:fragment="widget (sidebar)"
     th:class="'card widget tagcloud ' + ${sidebar.hide}"
     th:with="num = ${#strings.isEmpty(theme.config.sidebar.tags_num)? 32 : T(java.lang.Integer).parseInt(theme.config.sidebar.tags_num)},
      tags = ${tagFinder.list(1,num)},
      isEmpty = ${#lists.isEmpty(tags.items)},
      enableTagsColor = ${theme.config.sidebar.enable_tagcloud_color}">

    <div class="card-title" th:with="defaultTitle=#{widget.tagcloud.title}">
        <i th:class="${#strings.defaultString(sidebar.icon, 'ri-cloud-line') + ' card-title-label'}"></i><span
            th:text="${#strings.defaultString(sidebar.title, defaultTitle)}"></span>
        <a th:if="${theme.config.sidebar.tagcloud_more}" class="card-more" th:href="@{/tags}" th:aria-label="#{global.more.name}" th:title="#{global.more.name}">[[#{global.more.name}]]<i
                class="ri-arrow-right-double-line"></i></a>
    </div>
    <div th:if="${isEmpty}" class="card-empty">[[#{widget.tag.empty.tip}]]</div>
    <div th:unless="${isEmpty}" class="card-content">
        <a th:aria-label="${tag.spec.displayName}" th:title="${tag.spec.displayName}"
           th:each="tag : ${tags.items}"
           th:href="@{${tag.status.permalink}}"
           th:text="${tag.spec.displayName}"
           th:with="size = ${#strings.length(tag.spec.displayName) + #strings.length(tag.spec.slug) + (tag.postCount != null ? tag.postCount : 0)}"
           th:style="'font-size: ' + ${size < 14 ? 14 : size > 32 ? 32 : size} + 'px;' + ${(enableTagsColor && tag.spec.color != '#ffffff')? 'color: ' + tag.spec.color +';' : ''}"></a>
    </div>

    <th:block th:if="${theme.config.sidebar.show_tagcloud_style}">
        <script th:src="@{/assets/js/tagcloud.min.js(mew=${theme.spec.version})}"></script>
    </th:block>
</div>
